<template>
  <div class="login">
      <mytop :msg="msg"></mytop>
    <form ref="form" :model="form">
      <div>
        <label for="user">用户名:</label>
        <input
          type="text"
          name="user"
          v-model="form.user"
          @blur="checkuser"
          placeholder="请输入用户名"
        />
      </div>
      <div>
        <label for="tel">手机:</label>
        <input
          type="tel"
          name="tel"
          v-model="form.tel"
          @blur="checktel"
          placeholder="请输入手机号"
        />
      </div>
      <div>
        <label for="password">密码:</label>
        <input
          type="password"
          name="password"
          v-model="form.password"
          @blur="checkpass"
          placeholder="请输入密码"
        />
      </div>
      <div>
        <button class="btn" @click="login">登 录</button>
      </div>
    </form>
  </div>
</template>

<script>
import mytop from '@/components/input/top/top'

const reguser=/^\w{3,}$/;
const regtel=/^1[3|5|6|7|8|9]\d{9}$/;
const regpass=/^\d{6,18}$/;

export default {
    components:{mytop},
    data(){
        return{
            form:{
                user:'',
                tel:'',
                password:''
            },
            msg:'登录'               
        }
    },
    methods:{
        checkuser(){
            if(!reguser.test(this.form.user)){
                alert('请输入正确的用户名')
            }
        },
        checktel(){
            if(!regtel.test(this.form.tel)){
                alert('请输入正确的手机号')
            }
        },
        checkpass(){
            if(!regpass.test(this.form.password)){
                alert('请输入正确的密码')
            }
        },
        login(){
            alert('登录成功')
            this.$store.commit('userChange',this.form)
            this.$router.push('/home')
        }
    }
}
</script>

<style lang="scss" scoped>
.login{
    width: 100%;

    form{
        width: 100%;
        position: relative;
        top: 100px;

        div{
            width: 70%;
            margin: 5px auto;
            text-align: right;
            input{
                border: 1px solid gray;
                height: 30px;
                margin-right: 15px;
            }
            .btn{
                width: 30%;
                height: 40px;
                background: rgb(105, 139, 241);
                margin-right: 80px;
                outline: none;
                border: 0;
                color: #fff;
            }
        }
    }
}
</style>